<template>
  <div class="home">
    <div class="sm-topbar">
      <div class="empty"></div>
      <div class="topbar fix-top">
        <a>
          <img src="https://www.yfd.com.cn/templates/sitehtml/assets/images/logo.png"
            alt="品牌网站设计">
        </a>
        <div class="btn" :class="{'icon-change': isShowSmallMenu}"
          @click="isShowSmallMenu = !isShowSmallMenu"></div>
      </div>
    </div>
    <header class="header">
      <div class="top"> 不止气质,&nbsp;&nbsp;更重趋势!&nbsp;&nbsp;我们专注品牌互联网解决方案!</div>
      <div class="bottom">
        <div class="bottom-left">
          <h1>
            <a href="#">
              <span> 雨飞设计</span>
            </a>
          </h1>
        </div>
        <div class="bottom-right">10年 &nbsp;&nbsp; 提升品牌高度</div>
      </div>
    </header>

    <nav class="navbar" ref="navRef" :class="{'fix-top':navBarFixed}">
      <ul class="menu">
        <li class="list1">
          <a href="#">品牌网站</a>
          <ul class="child-menu">
            <li><a href="#">集团平台</a></li>
            <li><a href="#">服装服饰</a></li>
            <li><a href="#">珠宝美妆</a></li>
            <li><a href="#">地产家居</a></li>
            <li><a href="#">艺术设计</a></li>
            <li><a href="#">其他</a></li>
          </ul>
        </li>
        <li class="list2"><a href="#">电商解决方案</a></li>
        <li class="list3"><a href="#">微信营销</a></li>
        <li class="list4"><a href="#">小程序</a></li>
        <li class="list5"><a href="#">关于我们</a></li>
      </ul>
    </nav>

    <section class="content">
      <div class="content-wrap">
        <div class="picItem" v-for="item in picList" :key="item.id">
          <a href="#" target="_blank">
            <img :src="item.imgUrl" :alt="item.cntitle">
            <div class="shadow" :style="{backgroundColor:item.imgMask}"></div>
            <div class="shade"></div>
            <div class="info" :style="{backgroundColor:item.infoBgc}">
              <div class="top">
                <span>{{item.entitle}}</span>
                <span>{{item.cntitle}}</span>
              </div>
              <div class="bottom">
                Website Mobile Site App
              </div>
            </div>
            <i class="arrow"></i>
          </a>
        </div>
      </div>
    </section>

    <footer>
      <div class="top">
        <div class="left-content">
          <div class="left">
            <p>品牌<b>直线</b></p>
            <p>0755-8270 1066</p>
            <img src="https://www.yfd.com.cn/upload/201709/07/201709072001007328.jpg">
          </div>
          <div class="right">
            <p><b>深圳市雨飞设计有限公司</b></p>
            <p>深圳市福田区振华西路田面设计之都11栋2E</p>
            <p>T: 0755-82701066</p>
            <p>F: 0755-82701066-816</p>
            <p><a rel="nofollow" href="http://www.yfd.com.cn">W: www.yfd.com.cn</a></p>
          </div>
        </div>
        <div class="right-content">
          <div class="left">
            <p><b>郑小姐</b></p>
            <p>T 0755-82701066-801</p>
            <p>M 13631526817</p>
            <p><a href="http://wpa.qq.com/msgrd?v=3&uin=1069434988&site=qq&menu=yes"
                target="_blank">Q
                1069434988</a></p>
            <p><a rel="nofollow" href="mailto:znj@yfd.com.cn" target="_blank">E
                znj@yfd.com.cn</a></p>
          </div>
          <div class="right">
            <p><b>郑小姐</b></p>
            <p>T 0755-82701066-801</p>
            <p>M 13631526817</p>
            <p><a href="http://wpa.qq.com/msgrd?v=3&uin=1069434988&site=qq&menu=yes"
                target="_blank">Q
                1069434988</a></p>
            <p><a rel="nofollow" href="mailto:znj@yfd.com.cn" target="_blank">E
                znj@yfd.com.cn</a></p>
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <div class="bottom">
        <div class="link-list">友情链接</div>
        <ul>
          <li class="link-item" v-for="(item,i) in linksList" :key="i">
            <a rel="nofollow" target="_blank" :href="item.url">{{item.title}}</a>
          </li>
        </ul>
      </div>
      <div class="beian">
        Copyright &copy;2005-2021&nbsp;Yufei design All rights reserved.&nbsp;备案号:&nbsp;
        <a href="https://beian.miit.gov.cn" rel="nofollow"
          target="_blank">粤ICP备05104904号</a>
        <img src="../assets/police.png">
        <a target="_blank" rel="nofollow"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402000876 ">&nbsp;粤公网安备
          44030402000876号</a>
      </div>
    </footer>
    <go-top v-show="isShowgoTopBtn" @click.native="gotoTop"></go-top>
    <transition name="slide">
      <small-menu v-if="isShowSmallMenu"></small-menu>
    </transition>
  </div>
</template>

<script>
import GoTop from './chidComps/goTop.vue'
import SmallMenu from './chidComps/smallmenu.vue'

export default {
  name: 'Home',
  components: {
    GoTop,
    SmallMenu
  },
  data() {
    return {
      picList: [
        { id: 1, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 2, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 3, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 4, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 5, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 6, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 7, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 8, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 9, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 10, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 11, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 12, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 13, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 14, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 15, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 16, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 17, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 18, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 19, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 20, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 21, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 22, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 23, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 24, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 25, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 26, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' },
        { id: 27, imgUrl: 'https://www.yfd.com.cn/upload/202109/11/202109111750126083.jpg', entitle: 'OJESH', cntitle: '欧娅诗', infoBgc: 'rgb(46, 46, 46)', imgMask: 'rgb(46, 46, 46)' },
        { id: 28, imgUrl: 'https://www.yfd.com.cn/upload/202110/15/202110152040002158.jpg', entitle: 'YINER', cntitle: '音儿', infoBgc: 'rgb(58, 50, 45)', imgMask: 'rgb(58, 50, 45)' },
        { id: 29, imgUrl: 'https://www.yfd.com.cn/upload/202110/14/202110141353214392.jpg', entitle: 'INSUN', cntitle: '恩裳', infoBgc: 'rgb(42, 30, 66)', imgMask: 'rgb(42, 30, 66)' },
        { id: 30, imgUrl: 'https://www.yfd.com.cn/upload/202110/26/202110262014235264.jpg', entitle: 'AIAITIE', cntitle: '艾艾贴', infoBgc: 'rgb(110, 116, 82)', imgMask: 'rgb(110, 116, 82)' }

      ],
      linksList: [
        { title: 'VI设计', url: 'http://www.mitwo.net' },
        { title: '懒人时代', url: 'http://www.lazyage.cn' },
        { title: '服装小程序', url: 'http://www.yufei.net.cn' },
        { title: '家居品牌设计', url: 'http://www.yfd.com.cn' },
        { title: 'VI设计', url: 'http://www.mitwo.net' },
        { title: '懒人时代', url: 'http://www.lazyage.cn' },
        { title: '服装小程序', url: 'http://www.yufei.net.cn' },
        { title: '家居品牌设计', url: 'http://www.yfd.com.cn' },
        { title: 'VI设计', url: 'http://www.mitwo.net' },
        { title: '懒人时代', url: 'http://www.lazyage.cn' },
        { title: '服装小程序', url: 'http://www.yufei.net.cn' },
        { title: '家居品牌设计', url: 'http://www.yfd.com.cn' },
        { title: 'VI设计', url: 'http://www.mitwo.net' },
        { title: '懒人时代', url: 'http://www.lazyage.cn' },
        { title: '服装小程序', url: 'http://www.yufei.net.cn' }
      ],
      navBarFixed: false,
      isShowgoTopBtn: false,
      isShowSmallMenu: false,
      scrollTop: 0
    }
  },
  mounted() {
    // 事件监听滚动条
    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    watchScroll() {
      // 滚动的距离
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop

      // 容器的高度
      const offsetTop = document.querySelector('.navbar').offsetTop

      // console.log('scrollTop=>', scrollTop, ' offsetTop=>', offsetTop)

      //  滚动的距离如果大于了元素到顶部的距离时,实现吸顶效果
      if (this.scrollTop > offsetTop) {
        this.navBarFixed = true
        this.isShowgoTopBtn = true
      } else {
        this.navBarFixed = false
        this.isShowgoTopBtn = false
      }
    },
    // 返回顶部
    gotoTop() {
      // console.log('object')
      // 滚动的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop

      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = scrollTop -= 80
        if (scrollTop <= 0) clearInterval(timeTop)
      }, 10)
    }
  },
  destroyed() {
    // 移除事件监听
    window.removeEventListener('scroll', this.watchScroll)
  }

}
</script>

<style lang="less" scoped>
@import url('../style/layout.css');
.header {
  display: none;
  .top {
    width: 100%;
    height: 67px;
    background-color: #333;
    text-align: center;
    font: normal 18px/67px 'microsoft yahei', tahoma, arial, sans-serif;
    color: #e4e4e4;
  }
  .bottom {
    height: 66px;
    padding: 45px 0 30px;
    margin: 0 40px;
    position: relative;

    .bottom-left {
      width: 275px;
      height: 100%;

      h1 {
        margin: 0;
        width: 100%;
        height: 100%;
        span {
          display: block;
          width: 100%;
          height: 100%;
          line-height: 100%;
          overflow: hidden;
          background: url('https://www.yfd.com.cn/templates/sitehtml/assets/images/logo.png')
            no-repeat center;
          background-size: 100%;
          text-indent: -999px;
        }
      }
    }

    .bottom-right {
      height: 20px;
      position: absolute;
      right: 0;
      bottom: 30px;
      font: normal 20px/1 microsoft yahei, tahoma, arial, sans-serif;
      color: #11adbb;
    }
  }
}
.navbar {
  display: none;
  margin-bottom: 5px;
  position: relative;
  // position: sticky;
  // top: 0;
  z-index: 29;
  .menu {
    margin: 0 40px;
    text-align: center;
    li {
      width: 20%;
      height: 57px;
      line-height: 57px;
      display: inline-block;
      font-size: 16px;
      a {
        display: block;
        color: #fff;
      }
      transition: background-color 1s;
      &:hover {
        background-color: #333;
      }
    }
    .list1 {
      background-color: #41457d;
      position: relative;

      &:hover {
        .child-menu {
          opacity: 1;
          visibility: visible;
        }
      }

      .child-menu {
        transition: all 0.5s;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 57px;
        width: 100%;
        z-index: 9;
        visibility: hidden;
        padding: 5px 0 0 0;
        background-color: #fff;
        &::before {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: -8px;
          content: '';
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 8px solid #fff;
        }
        li {
          width: 100%;
          display: block;
          text-align: center;
          margin-bottom: 5px;
          background-color: #41457d;
          &:hover {
            background-color: #11adbb;
          }
          a {
            display: block;
            width: 100%;
          }
        }
        li:last-child {
          margin-bottom: 0;
        }
      }
    }
    .list2 {
      background-color: #ff8d1a;
    }
    .list3 {
      background-color: #79a158;
    }
    .list4 {
      background-color: #9c5e98;
    }
    .list5 {
      background-color: #11adbb;
    }
  }
}
footer {
  padding: 30px 20px 20px;
  background-color: #dcf3f5;
  color: #11adbb;
  .top {
    border-top: 1px solid #11adbb;
    padding-top: 30px;
    font-size: 17px;
    line-height: 25px;
    .left-content {
      overflow: hidden;
      .left,
      .right {
        float: left;
        padding: 0 20px 20px 0;
        height: 140px;
      }
      img {
        width: 80px;
        height: 80px;
      }
    }
    .right-content {
      overflow: hidden;
      .left,
      .right {
        float: left;
        padding: 0 20px 20px 0;
      }
    }
    a {
      color: #11adbb;
    }
  }
  .bottom {
    overflow: hidden;
    padding: 0 0 30px;
    border-bottom: 3px solid #11adbb;
    .link-list {
      font-size: 14px;
      border-top: 1px solid #ace5df;
      padding-top: 15px;
    }
    ul {
      .link-item {
        font-size: 14px;
        float: left;
        margin: 15px 20px 0 0;
        a {
          color: #11adbb;
        }
      }
    }
  }
  .beian {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    a {
      color: #999;
    }
    img {
      width: 15px;
      height: 15px;
      vertical-align: middle;
    }
  }
}
.fix-top {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
}
// 小屏顶部栏
.sm-topbar {
  .empty {
    height: 54px;
    width: 100%;
  }
  .topbar {
    background-color: #fff;
    height: 54px;
    margin: 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    a {
      img {
        width: 142px;
        vertical-align: middle;
      }
    }
    .btn {
      width: 25px;
      height: 25px;
      background: url('../assets/下载.png');
      background-size: 25px 50px;
      transition: all 0.5s;
    }
    .icon-change {
      background-position: bottom;
    }
  }
}

// 入场动画
.slide-enter,
.slide-leave-to {
  top: calc(-100% - 54px);
}
.slide-enter-active,
.slide-leave-active {
  transition: top 0.5s;
}
.slide-enter-to,
.slide-leave {
  top: 0;
}
</style>
